<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>
    <script>
        const xs = [1, 2, 3, 4];
        const ys = [1, 3, 5, 7];
        tfvis.render.scatterplot(
        {surface: document.getElementById("root")},
        { 
            values: xs.map((x, i) => ({ x, y: ys[i]})),
        }
    )
        // const surface = document.getElementById('root');
        // const series = ['First', 'Second'];

        // const serie1 = [];
        // const serie2 = [];
        // for (let i = 0; i < 100; i++) {
        //     serie1[i] = { x: i, y: Math.random() * 100 };
        //     serie2[i] = { x: i, y: Math.random() * 100 };
        // }

        // const data = { values: [serie1, serie2], series }

        // tfvis.render.scatterplot(surface, data);
    </script>
</body>

</html>